In diesem größeren Kapitel schauen wir uns die wesentlichen HTML5-Elemente an. SelfHTML ist eine sehr gute Quelle, um HTML zu lernen. Noch einmal ganz kurz: Was ist HTML? Die Hypertext Markup Language (HTML) ist eine textbasierte Auszeichnungssprache zur Strukturierung digitaler Dokumente wie Texte mit Hyperlinks, Bildern und anderen Inhalten. HTML-Dokumente sind die Grundlage des World Wide Web und werden von Webbrowsern dargestellt. Neben den vom Browser angezeigten Inhalten können HTML-Dateien zusätzliche Angaben in Form von Metainformationen enthalten, zum Beispiel über die im Text verwendeten Sprachen, über den Autor oder über den zusammengefassten Inhalt des Textes. HTML dient als Auszeichnungssprache dazu, einen Text semantisch zu strukturieren, nicht aber zu formatieren. HTML ist keine Programmiersprache! Die visuelle Darstellung ist nicht Teil der HTML-Spezifikationen und wird durch den Webbrowser und Gestaltungsvorlagen wie CSS bestimmt. Ein ähnliches Konzept zur logischen Beschreibung von Dokumenten steht hinter dem Satzsystem TeX oder LaTeX, das im Unterschied zu HTML jedoch auf die Ausgabe per Drucker auf Papier zielt. Die Grundstruktur einer HTML5-Seite sieht wie folgt aus. Zunächst erfolgt die Dokumenttyp-Deklaration. Das ist immer . Danach kommt der head, in dem Metadaten, Skript- und Style-Referenzen abgelegt werden. Dahinter kommt der body. Das ist der sichtbare Inhalt der Webseite, also Text mit Überschriften, Verweisen, Grafikreferenzen und so weiter. Ein zentrales HTML-Element sind die Überschriften, sogenannte headings. Die größte Überschrift ist h1 und die kleinste ist h6. Damit kann man also einen Text auf bis zu sechs Ebenen gliedern und die Hierarchieverhältnisse abbilden. Die Formatierung jeder Überschrift wie die Größe, Farbe und Schriftart wird, wie alles andere auch, über CSS extern definiert. In HTML definiert man nur die Struktur. Absätze (paragraph p) dienen der Gliederung eines Textes. p umfasst einen Textblock – es steht nicht für den Zwischenraum zwischen zwei Absätzen. Absatz-Elemente dürfen keine anderen blockerzeugenden Elemente wie Überschriften, Textabsätze oder Listen enthalten. Das break-Element sollte ausschließlich für Zeilenumbrüche, die Bestandteil des Inhalts sind, genutzt werden. Zum Beispiel für Gedichte oder Adressen. Dabei sind ausnahmsweise zwei Schreibweisen erlaubt. Die erste Schreibweise entspricht voll dem aktuellen HTML5-Standard. Die zweite Schreibweise finde ich jedoch persönlich sinnvoller, da bei der ersten Schreibweise formell das Ende des Elements nicht existiert und damit keine XHTML- beziehungsweise keine XML-Kompatibilität erfüllt ist. Soweit ich weiß, wird auch die zweite Schreibweise im HTML5-Standard noch toleriert. Der Horizontal Ruler (hr) kennzeichnet einen thematischen Bruch. Ursprünglich wurden solche Trenner als waagerechte Linien dargestellt. In HTML5 bekommt das hr-Element die Bedeutung eines Themenwechsels auf Absatz-Ebene: „paragraph-level thematic break“. Sichtbare Trennlinien dienen auch visuell der Abgrenzung von nicht unmittelbar zusammengehörigen Textabschnitten. hr fügt also eine Trennlinie ein und erzeugt dabei einen eigenen Absatz. Auch hier fehlt streng genommen das Ende des Elements, um XML-konform zu sein. Dies ist aber laut W3C-Standard so erlaubt. Die Ordered List (ol) bezeichnet eine geordnete oder nummerierte Liste, also eine Liste, bei der die Reihenfolge der Elemente von Bedeutung ist. Mit li beginnt ein neuer Punkt innerhalb der Liste. Das HTML-Element li bedeutet „list item“, also Listeneintrag. Hier gilt generell wieder, dass jedes Beginn-Element auch ein passendes Ende-Element haben muss. Das Verschachteln von nummerierten Listen ist möglich, bewirkt aber keine Gesamtnummerierung. Automatische Nummerierungshierarchien wie 1, 1.1, 1.1.1 sind mit HTML allein nicht möglich. Dazu bedarf es der Unterstützung von CSS, indem man Listen mit hybrider Nummerierung formatiert. Sie können aber in HTML den Startwert einer Liste festlegen und bei einem beliebigen Listenelement neu setzen. Dazu nutzen Sie das Attribut „start“ des ol-Elementes. Erlaubte Werte für dieses Attribut sind ganze Zahlen. In diesem Beispiel startet die Gesamtliste bei fünf. Im zweiten Element wird dann festgelegt, dass die Nummerierung hier wieder bei eins beginnen soll. Das Element ul (unordered list) beschreibt eine Aufzählungsliste. Aufzählungslisten sind zum Beispiel von Bedeutung, um Produkteigenschaften oder Argumente für eine These übersichtlich darzustellen. Bei einer Aufzählungsliste werden die Listeneinträge von grafischen Browsern standardmäßig mit einem Aufzählungszeichen (Bullet) versehen. Das Verschachteln von Listen ist ebenfalls möglich. Zwischen dem Beginn und Ende eines Listenelements darf eine komplette weitere Liste stehen. Auch andere Listentypen sind dabei erlaubt. Definitionslisten dl (description list), seit HTML5 Beschreibungslisten, sind beispielsweise für Glossare gedacht. Ein Glossar besteht meist aus einer Liste von Einträgen, die wiederum aus mindestens einem zu erklärenden Sachverhalt nebst mindestens einer Erklärung besteht. Eine Definitions- beziehungsweise Beschreibungsliste wird mit dl eingeleitet und mit beendet. Der zu erläuternde Ausdruck steht zwischen dem dt-Element als description list term. Das dd-Element als description list description umschließt die Erläuterung. Die Abfolge von dt- und dd-Elementen innerhalb einer dl-Liste ist nicht streng geregelt: Es dürfen auch mehrere dt- oder dd-Elemente hintereinander folgen. Zum Beispiel könnten Begriffe mit einer Erklärung abgehandelt werden oder mehrere Bedeutungen für einen Begriff existieren. Das Verschachteln von Definitionslisten ist ebenfalls möglich. Dadurch können Sie baumartige Strukturen im Text abbilden. Mit dem image-Element können Sie Grafikdateien in Ihre HTML-Dokumente einbinden. img ist ein sogenanntes Standalone-Tag. Das End-Tag muss nach aktuellem W3C-Standard nicht zwingend angegeben werden. Folgende Angaben sind aber immer nötig: src für die Referenz der Bilddatei. Diese kann wie in HTML üblich relativ oder absolut angegeben werden. Die Grafik selbst ist nicht Bestandteil des HTML-Dokuments, sondern wird in HTML an der Stelle referenziert, an der sie angezeigt werden soll. alt gibt den Alternativtext an, der angezeigt wird, wenn das Bild nicht geladen werden kann oder soll. Screen Reader lesen den Text vor. Width beziehungsweise height geben die Bildbreite beziehungsweise -höhe an. Seit HTML5 sind nur noch Angaben in Pixeln erlaubt; es ist keine Einheit mehr anzugeben. Hier sehen wir mal ein Bild, das durch ein figure-Element gerahmt wird und um eine Bildbeschreibung ergänzt wurde. Sie sollten jedoch stets die Breite und Höhe der Grafik im Quelltext mit angeben. Dadurch entnimmt der Web-Browser bereits der HTML-Datei, wie groß die Grafik ist, und muss nicht warten, bis er die entsprechende Header-Information der Grafikdatei ausgelesen hat. So kann er die gesamte Webseite bereits am Bildschirm aufbauen und bei noch nicht eingelesenen Grafiken erst mal eine entsprechend große Freifläche anzeigen. Ansonsten wartet der Browser mit der Anzeige der Webseite, bis er alle nötigen Größenangaben aus eingebundenen Grafikdateien eingelesen hat, oder er muss den Bildschirmaufbau korrigieren, was nicht sehr schön aussieht. Kommen wir nun zu den Grundlagen der Hyperlinks mit dem Anchor-Element. Der erste Link führt zu einem anderen Webangebot; dies ist ein externer Link. Der zweite Link führt zu einer anderen Seite der gleichen Domain: Das ist also ein interner Link. Der dritte Link ist extern und enthält selbst mehrere Elemente. Mit einem a-Element können Sie einen Link zu einem anderen Dokument oder zu einem Anker (anchor) setzen. Aber erst das href-Attribut (hypertext reference) verwandelt das a-Element in einen Verweis, indem Sie ihm das gewünschte Verweisziel als Wert zuweisen. Hyperlinks sind ein entscheidender Bestandteil jedes Hypertext-Projekts und der intelligente Mehrwert des World Wide Web. Ursprünglich war ein a-Element mit einem name-Attribut ein Sprungziel eines Verweises, dies ist jedoch mittlerweile obsolet. Heute kann jedes beliebige Element mit einem ID-Attribut als Verweisziel fungieren. Als Inhalt des a-Elements, also zwischen dem Begin- und End-Tag, notieren Sie den Text, der dem Anwender als Verweis angeboten wird. Dieser wird bei den meisten Web-Browsern andersfarbig und meist unterstrichen dargestellt. Als Anker beziehungsweise Sprungziel ist jedes ID-Attribut in jedem beliebigen Element geeignet, zum Beispiel:

. Der Verweis zu dieser Stelle auf der gleichen Seite würde dann lauten: . Mit dem target-Attribut können Sie ein Zielfenster für Verweise festlegen, so dass ein Verweisziel im aktuellen oder einem neu geöffneten Browserfenster oder Tab angezeigt wird. Folgende Werte sind dabei möglich: \_self öffnet im aktuellen Fenster, das ist der Standardwert. \_blank öffnet in neuem Fenster. \_parent öffnet im Elternfenster. \_top öffnet den Link im obersten Fenster. Letztlich können Sie noch einen eigenen Fensternamen für ein vorhandenes oder neues Fenster verwenden. Hier sehen wir das target="\_blank"-Attribut im a-Element. Der Link öffnet dann ein neues Browserfenster. Es ist möglich, mit Hilfe der Tabulator-Taste die Verweise einer HTML-Datei anzuspringen. Mit der Return-Taste ist der Verweis dann ausführbar. Normalerweise werden die Verweise dabei in der Reihenfolge angesprungen, in der sie in der Datei definiert sind. Sie können jedoch mit dem Universalattribut tabindex eine andere Reihenfolge festlegen. Tabindizes beziehen sich stets auf das gesamte angezeigte Dokument. Dabei werden auch Formulare sowie Verweisbereiche in Grafiken und Objekten mit einbezogen. Durch die Angabe von "download" öffnet sich ein Fenster, bei dem sich der Benutzer entscheiden kann, die Zieldatei im Browser mit einem vom Browser vorgeschlagenen Programm zu öffnen oder auf der Festplatte zu speichern. Beim Ausführen der Links wird in Abhängigkeit von den Browsereinstellungen die Ressource direkt gespeichert oder zum Download angeboten. Für den zweiten Link wird durch den Wert des download-Attributes ein Dateiname vorgeschlagen. Bis auf die Microsoft-Browser Edge und Internet Explorer verhalten sich alle aktuellen Browserversionen spezifikationsgemäß, nur Edge ignoriert einen vorgeschlagenen Dateinamen. Der Internet Explorer kennt das download-Attribut gar nicht. Hier sehen wir das Logo der Hochschule zum Download mit dem vorgeschlagenen Dateinamen als Attributwert. Innerhalb des a-Elements finden Sie das image-Element zur Darstellung. Bei einem Klick wird das Logo dann heruntergeladen. Der nächste größere Abschnitt befasst sich mit HTML-Tabellen. Eine Tabelle ist eine geordnete Zusammenstellung von Texten oder Daten. Die darzustellenden Inhalte werden dabei in Zeilen und Spalten gegliedert, die grafisch aneinander ausgerichtet werden. Sinnvolle Einsatzbereiche für Tabellen sind beispielsweise Kalender, Stundenpläne und Fahrpläne, das TV-Programm oder Statistiken. Früher wurden Tabellen auch zur Layout-Gestaltung und Aufteilung von HTML-Seiten verwendet. Dies ist jedoch strikt zu vermeiden, unter anderem da Suchmaschinen HTML-Tabellen stets als Content interpretieren! Stattdessen sollten zur Layout-Gestaltung div-Container mit CSS-Formatierung verwendet werden! Die Folie zeigt die Grundstruktur einer HTML-Tabelle. Sie beginnt mit dem table-Tag, das den Anfang der Tabelle markiert. Innerhalb der Tabelle wird der Kopfbereich durch das thead-Tag definiert, das eine Kopfzeile mit Spaltenüberschriften enthält. Diese Kopfzeile besteht aus einem Zeilen-Tag tr (table row), das wiederum mehrere Zellen-Tags th (table header) für die einzelnen Spaltenüberschriften enthält. Jede Spaltenüberschrift wird von einem th-Tag umschlossen. Unterhalb des Kopfbereichs befindet sich der Tabellenkörper, der durch das tbody-Tag definiert wird. Der Tabellenkörper enthält die eigentlichen Datenzeilen, die ebenfalls durch tr-Tags strukturiert sind. Jede Datenzeile besteht aus mehreren Zellen, die durch td-Tags (table data) dargestellt werden. In der Abbildung werden zwei Datenzeilen mit jeweils drei Datenzellen dargestellt. Das abschließende -Tag markiert das Ende der Tabelle. Hier sehen Sie den Aufbau einer solchen HTML-Tabelle in reinem HTML und wie sie dann im Browser zu sehen ist. Die gesamte Formatierung soll ausschließlich via CSS erfolgen. Wir haben hier einen Header, einen Body und einen Footer sowie zwei Spalten. Es gibt eine Zeile mit Inhalt im Body. Dabei enthält der Tabellenkopf die Zeilen der einfachen Tabelle, die ausschließlich Kopfzellen beziehungsweise Spaltenüberschriften enthalten. Der Tabellenkörper enthält die Zeilen, die ausschließlich Datenzellen enthalten. Der Tabellenfuß enthält zusammenfassende oder die Tabelle erläuternde Daten. Wenn die Tabelle im Ausdruck größer als eine Seite ist, werden die thead- und tfoot-Teile beim Drucken auf jeder Seite wiederholt. Das Attribut colspan erlaubt es, eine Tabellenzelle nach rechts über mehrere Spalten auszudehnen. Das Attribut rowspan erlaubt es, eine Tabellenzelle nach unten über mehrere Zeilen auszudehnen. Die beiden Attribute sind auch kombinierbar. Hier sehen Sie eine HTML-Tabelle, bei der eine einzige Zelle mit rowspan="3" über drei Zeilen und mit colspan="2" über zwei Spalten ausgedehnt wird. Nun sehen Sie, wie man mit Zitaten in HTML umgehen kann. Das Element q (quote) dient der Auszeichnung von Zitaten im Fließtext. Verwenden Sie das Attribut "cite", um eine Online-Quelle anzugeben. Wenn Sie ein Wort oder einen Text betonen wollen, verwenden Sie bitte das em-Element (Emphasized). Wie genau der Browser die Elemente zur Textauszeichnung darstellt, darauf haben Sie mit HTML allein keinerlei Einfluss. Die Browser benutzen zwar Default-Einstellungen, diese können sich aber von Browser zu Browser unterscheiden. Mit CSS können Sie Ihre Elemente jedoch nach Wunsch formatieren. Eine stärkere Betonung erreichen Sie mit dem strong-Tag (strongly emphasized). Anders herum kann mit dem small-Element weniger bedeutender Text dargestellt werden. Das ist typisch für das Kleingedruckte. Das small-Element war ursprünglich ein rein präsentationsbezogenes Element ohne semantische Bedeutung für kleiner dargestellten Text. Das div-Element (division) ist dazu gedacht, mehrere Elemente wie Text, Grafiken, Tabellen und so weiter in einen gemeinsamen Bereich einzuschließen (hier: grau). Dieses allgemeine Element bewirkt nichts weiter als dass es in einer neuen Zeile des Fließtextes beginnt. Divs blockieren standardmäßig die komplette Zeile, ansonsten haben sie keine Eigenschaften. Es ist dazu gedacht, Bereiche zu erzeugen, die mit Hilfe von CSS formatiert werden können. In Kombination mit CSS hat das div-Element zur Formatierung der Präsentation einer Webseite eine wichtige Bedeutung. Das span-Element ist ein Element, das Text und andere Inline-Elemente enthalten kann, selbst aber keine semantische Bedeutung hat und nichts bewirkt. Es ist nur dazu gedacht, um mit Hilfe von CSS formatiert zu werden. Wie das genau funktioniert, wird später behandelt in den Kapiteln zu CSS. Den sichtbaren Inhalt im HTML-Body sollten Sie nach neuesten Richtlinien noch in Abschnitte unterteilen. header definiert dabei den Kopf der sichtbaren Webseite, oftmals mit einem Logo und dem Titel der Webseite. main definiert den Hauptteil der Webseite und darf nur einmal enthalten sein. footer definiert den Fußteil der Webseite, oftmals mit einem Verweis auf das Impressum und Copyright. Das nav-Element umschließt Navigationsleisten und Menüs, wobei es neben einer ungeordneten Liste mit den Verweisen auch eine Überschrift oder ähnliches enthalten kann. Abschließend noch etwas zu HTML-Sonderzeichen. Ein Sonderzeichen ist ein Schriftzeichen, das in einer Programmier- oder Auszeichnungssprache eine besondere Bedeutung hat und deshalb maskiert oder durch andere Zeichen oder Zeichenfolgen ersetzt werden muss, wenn es im normalen Text vorkommen soll. Ebenso kann es sein, dass besondere Zeichen nicht im Standard-Zeichensatz vorkommen und daher besonders codiert beziehungsweise dargestellt werden müssen. Die Sonderzeichen werden immer mit einem kaufmännischen „und“ eingeleitet und mit einem Semikolon abgeschlossen.